<template>
  <div>
    <div>
      <van-row style="background: #39a9ed;">
        <van-col span="10">
          <div class="block">
            <el-avatar :size="100" :src="icon"
                       style="margin-top: 20px;margin-bottom: 10px;margin-left: 20px"></el-avatar>
          </div>
        </van-col>
        <van-col span="14">
          <div style="margin-top: 50px;margin-left: -20px;">
            <span v-if="username && username.length>0" style="margin-top: 60px"><h1
                style="font-size: 20px;text-align: left;margin-left: 10px">{{ username }}</h1>
            </span>
            <span v-else style="margin-top: 60px" @click="toLogin"><h1
                style="font-size: 20px;text-align: left;margin-left: 10px">登入/注册</h1>
            </span>
            <p style="text-align: left;font-size: 13px;color: gray;margin-left: 3px">快乐开启观看之旅</p>
          </div>
        </van-col>

      </van-row>
    </div>
    <div>
      <van-grid>
        <van-grid-item v-for="i in 4" icon="photo-o" text="文字" style="height: 70px;width: 25%"><van-image
  width="100"
  height="100"
  src="https://img01.yzcdn.cn/vant/cat.jpeg"
  fit="fill"
/></van-grid-item>

      </van-grid>
    </div>
    <div>
      <div class="van-cell van-cell--clickable" role="button" tabindex="0"><!---->
        <div class="van-cell__title"><span>我的VIP</span><!----></div><!----><i
            class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon"><!----><!----><!----></i><!---->
      </div>
      <van-cell is-link @click="showPopup" close-icon="close">修改密码</van-cell>

      <van-popup v-model="show2" round style="width: 90%" close-icon="close">
        <van-tabs v-model="active1">
          <van-tab title="" disabled></van-tab>
          <van-tab title="修改密码">
            <van-form @submit="onSubmit">
              <van-field
                  v-model="password"
                  name="用户名"
                  type="password"
                  label="原密码"
                  placeholder="输入原密码"
                  :rules="[{ required: false, message: '请填写用户名' }]"
              />
              <van-field
                  v-model="new_password"
                  type="password"
                  name="密码"
                  label="新密码"
                  placeholder="密码"
                  :rules="[{ required: false, message: '请填写新密码' }]"
              />
              <van-field
                  v-model="new_password_again"
                  type="password"
                  name="密码"
                  label="再次输入"
                  placeholder="密码"
                  :rules="[{ required: false, message: '请再次填写新密码' }]"
              />
              <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
              </div>
            </van-form>
          </van-tab>
          <van-tab title="" disabled></van-tab>

        </van-tabs>

      </van-popup>
      <div class="van-cell van-cell--clickable" role="button" tabindex="1"><!---->
        <div class="van-cell__title" @click="goModify"><span>个人信息</span><!----></div><!----><i
            class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon"><!----><!----><!----></i><!---->
      </div>

      <div class="van-cell van-cell--clickable" role="button" tabindex="2"><!---->

        <div class="van-cell__title" @click="exit"><span>退出账号</span><!----></div><!----><i
            class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon"><!----><!----><!----></i><!---->

      </div>

    </div>

    <div>
      <van-tabbar v-model="active" style="height: 50px;opacity: 0.9;">
        <van-tabbar-item icon="home-o" @click="goHome">首页</van-tabbar-item>
        <van-tabbar-item icon="refund-o" @click="goFication">VIP</van-tabbar-item>
        <van-tabbar-item icon="user-circle-o" >我的</van-tabbar-item>
      </van-tabbar>
    </div>

  </div>


</template>

<script>

import {Dialog, Toast} from 'vant';


export default {
  name: "PersonalCenter",
  data() {
    return {
      active: 2,
      active1: 1,
      icon: '',
      username: '',
      show: false,
      show2: false,
      password: '',
      new_password_again: '',
      new_password: ''

    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  methods: {
    toLogin() {
      this.$router.push('/login')

    },
    goHome() {
      this.$router.push('/')
    },
    goModify() {
      if (localStorage.getItem('username') === null) {
        Dialog.alert({
          title: '提示',
          message: '您还未登录',
        }).then(() => {
          // on close
        });
      } else {
        this.$router.push('/modify')
      }
    },
    goFication() {
       if(localStorage.getItem('username')===null){
       Toast('请先登录')
     }else {
       this.$router.push('/fication')
     }
    },
    exit() {
      if (localStorage.getItem('username') === null) {
        Dialog.alert({
          title: '提示',
          message: '您还未登录',
        }).then(() => {
          // on close
        });
      } else {
        Dialog.confirm({
          title: '提示',
          message: `尊敬的用户：${this.username},您是否要退出？`,
        })
            .then(() => {
              // on confirm
              // this.$cookies.remove('username')
              // this.$cookies.remove('token')
              // this.$cookies.remove('icon')
              localStorage.removeItem('username')
              localStorage.removeItem('token')
              localStorage.removeItem('icon')
              this.username = ''
              this.icon = ''
              Toast.success('成功退出');

            })
            .catch(() => {
              // on cancel
            });
      }

    },
    showPopup() {
      if (localStorage.getItem('username')=== null) {
        Dialog.alert({
          title: '提示',
          message: '您还未登录',
        }).then(() => {
          // on close
        });
      } else {
        if (this.show2 === false) {
          this.password = ''
          this.new_password = ''
          this.new_password_again = ''
        }
        this.show2 = true;
      }

    },
    onSubmit() {
      if (this.new_password === this.new_password_again) {
        this.$axios.put(`${this.$settings.base_url}user/modify_pwd/${localStorage.getItem('id')}/`, {
          password: this.password, new_password: this.new_password
        }).then(res => {

          Toast.success(res.data.msg);
          this.show2 = false
        }).catch(reason => {

          Toast.success(reason.data.msg);
        })
      } else {

        Toast.success('两次新密码不一致');
      }

    }
  },
  mounted() {
    // this.username = this.$cookies.get('username')
    // this.icon = this.$cookies.get('icon')
this.username = localStorage.getItem('username')
    this.icon = localStorage.getItem('icon')
  },


}
</script>

<style scoped>

</style>